<template>
  <div>
    <el-container>
      <el-header>
        <!-- 导出按钮 -->
        <el-button type="primary">导出成PDF</el-button>

        <!-- 获取样式数据 -->
        <el-button 
          type="primary" 
          @click="getStyle">获取样式数据</el-button>

        <!-- 下拉选择字体 -->
        切换字体：<el-select 
          v-model="selectedFont" 
          placeholder="请选择">
          <el-option
            v-for="item in fontList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <el-button type="primary"></el-button> -->
        <!-- <el-button type="primary">导出成PDF</el-button> -->
      </el-header>
      <el-container>
        <el-aside width="200px">
          内容：<el-input 
            v-model="content" 
            placeholder="请输入内容"></el-input>
          宽度：<el-input 
            v-model="height" 
            placeholder="宽度"
          ><template slot="append">px</template></el-input
          >
          长度：<el-input 
            v-model="width" 
            placeholder="长度"
          ><template slot="append">px</template></el-input
          >
          大小：<el-input 
            v-model="fontSize" 
            placeholder="长度"
          ><template slot="append">px</template></el-input
          >
        </el-aside>
        <el-main :class="{ [`font-${selectedFont}`]: true }">
          <div 
            ref="targetDom" 
            :style="styleObject">{{ content }}</div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import '@/assets/global.less';
import FontEnum from '@/constant/fontEnum.js';
export default {
  name: 'Editor',
  data() {
    return {
      content: '',
      msg: 'helloworld!',
      fontList: FontEnum,
      selectedFont: 'AvantGardeBookBT',
      height: '100',
      width: '300',
      fontSize: '36'
    };
  },
  computed: {
    styleObject() {
      return {
        height: this.height + 'px',
        width: this.width + 'px',
        fontSize: this.fontSize + 'px',
        color: 'red'
      };
    }
  },
  mounted() {
    // console.log(this.$refs.targetDom.style)
  },
  methods: {
    getStyle() {
      console.log(this.$refs.targetDom.style.height);
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.font-test {
  color: red;
  font-family: hotdog;
}
</style>
